<template>
    <div class="parent-container">
      <h1>这是父组件</h1>
      <label>{{ messageRef }}</label>
      <input class="parent-input"  v-model="messageRef" />
      <ChildComponent :parent-message="message" :parent-message-dynamic="messageRef" @child-method="handleChildMethod" />
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import ChildComponent from './ChildComponent.vue';
  
  const message = 'Hello from parent!';
  const messageRef = ref('Hello from parent!');//--RefImpl类型
  

  function handleChildMethod(data) {
    alert('Received from child : ' + data);
  }
  
  </script>

  <style>
.parent-container{
   border-width: 1px; /* 边框宽度为2像素 */
    border-style: solid; /* 边框样式为实线 */
    min-height: 100px;
    padding: 10px;
}
.parent-input{
  margin-bottom: 20px;
}
</style>